<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统</title>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/base.js"></script>
</head>
<body>
<div id="div">

    <div style="float: left;">
        <el-button type="primary" @click="showAddStu()">添加学生</el-button>
    </div>

    <el-table :data="pagination.list">
        <el-table-column prop="id" label="学号" width="120"></el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="birthday" label="生日" width="140"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column label="操作" width="180">
            <template slot-scope="props">
                <el-button type="warning" @click="showEditStu(props.row)">编辑</el-button>
                <el-button type="danger" @click="deleteStu(props.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

	 <!--
       el-pagination  分页插件
           layout 控制分页显示的内容
           :page-sizes  每页条数的选项
           :total="400"   总记录数
           :page-size="100"  每页条数
           :current-page="currentPage4"  当前页码
           @size-change="handleSizeChange"    每页条数改变的时候,触发
           @current-change="handleCurrentChange"  当前页面改变的时候,触发
    -->

    <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            :current-page="pagination.pageNum"
            :page-size="pagination.pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
    ></el-pagination>

    <el-dialog title="添加学生信息" :visible.sync="dialogTableVisible4Add" @close="resetForm('addForm')">
        <el-form :model="formData" ref="addForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="学生学号">
                <el-input v-model="formData.id"></el-input>
            </el-form-item>
            <el-form-item label="学生姓名">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="学生生日">
                <el-input v-model="formData.birthday" type="date"></el-input>
            </el-form-item>
            <el-form-item label="学生地址">
                <el-input v-model="formData.address"></el-input>
            </el-form-item>
            <el-form-item align="right">
                <el-button type="primary" @click="addStu()">添加</el-button>
                <el-button @click="resetForm('addForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog title="编辑学生信息" :visible.sync="dialogTableVisible4Edit" @close="resetForm('editForm')">
        <el-form :model="editFormData" ref="editForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="学生学号">
                <el-input v-model="editFormData.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="学生姓名">
                <el-input v-model="editFormData.name"></el-input>
            </el-form-item>
            <el-form-item label="学生生日">
                <!--v-model : 双向绑定 -->
                <el-input v-model="editFormData.birthday" type="date"></el-input>
            </el-form-item>
            <el-form-item label="学生地址">
                <el-input v-model="editFormData.address"></el-input>
            </el-form-item>

            <el-form-item align="right">
                <el-button type="warning" @click="editStu()">修改</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>
</body>
<script>
    new Vue({
        el: "#div",
        data: {
            dialogTableVisible4Add: false,  //添加窗口显示状态
            dialogTableVisible4Edit: false, //编辑窗口显示状态
            formData: {},//添加表单的数据
            editFormData: {},//编辑表单的数据
            tableData: [],//表格数据
            pagination: {
                pageNum: 1,  //当前页
                pageSize: 10, //每页显示条数
                total: 0, //总条数
                pages: 0, //总页数
                list: [],//当前页数据集合
            }
        },
        methods: {
			//每页条数改变的时候,触发
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pagination.pageSize = val;//val 刚选择

                this.findList();
            },
            //当前页面改变的时候,触发这个时间
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pagination.pageNum = val;//val 刚选择的页码

                this.findList();
            },
            //查询列表
            findList() {
                //发送异步请求，获取学生信息  不带分页
                // axios.get(app_path+"/student?action=findAll").then(resp=>{
                //     //给vue中的tableData赋值，当赋值成功之后elementui会自动把tableData的数学帮我们绑定到表格中显示
                //     this.tableData = resp.data;
                // })

                //发送异步请求，获取学生信息，带分页
                axios.get(app_path+"/student",{
                    params:{
                        action : "findPage",
                        pageNum : this.pagination.pageNum,
                        pageSize : this.pagination.pageSize
                    }
                }).then(resp=>{
                    //给vue中的tableData赋值，当赋值成功之后elementui会自动把tableData的数学帮我们绑定到表格中显示
                    //this.tableData = resp.data;

                    //当使用了分页之后，就不要给tableData赋值了，而是给pagination赋值
                    this.pagination = resp.data;
                })
            },
            //打开添加框
            showAddStu(row) {
                this.dialogTableVisible4Add = true;
                console.log("打开添加框");
            },
            //添加学生
            addStu(){
                //发送异步请求，把学生添加到数据库中。请求的方式要使用post
                axios.post(app_path+"/student?action=save",this.formData).then(resp=>{
                    //判断返回值
                    if(resp.data == "ok"){
                        //1.清空formData的内容
                        this.formData = {};
                        //2.关闭对话框
                        this.dialogTableVisible4Add = false;
                        //3.重新加载列表
                        this.findList();
                    }
                })
            },
            //打开编辑框
            showEditStu(row) {
                this.dialogTableVisible4Edit = true;
                console.log("打开编辑框");

                //第一种方式：通过使用传入的id去查询
                //发送异步请求，根据id查询学生信息
                // axios.get(app_path+"/student?action=findById&id="+row.id).then(resp=>{
                //       this.editFormData = resp.data;
                // });

                //第二种方式：直接把传入的row用于编辑，而减少去数据库查询的次数
                //alert("row is :"+row);
                //1.先定义一个变量用于接收传入的数据
                let editStudent = '';
                //2.把传入的数据给定义的变量赋值，把json对象转成字符串
                editStudent = JSON.stringify(row);
               // alert("eidtStudent is "+editStudent)
                //3.再把定义的变量中的值，给编辑的对象赋值，把字符串转成json对象
                this.editFormData = JSON.parse(editStudent);
                //alert("最终转换结果："+this.editFormData);
            },
            //修改学生信息
            editStu(){
                //发送异步请求，使用post方式完成修改
                axios.post(app_path+"/student?action=update",this.editFormData).then(resp=>{
                    //判断执行结果
                    if(resp.data == "ok"){
                        //1.清空编辑表单数据
                        this.editFormData = {};
                        //2.关闭对话框
                        this.dialogTableVisible4Edit = false;
                        //3.刷新列表页面
                        this.findList();
                    }
                })
            },
            //删除学生
            deleteStu(row) {
                if(window.confirm("确定删除吗？")){
                    //发送异步请求，删除学生
                    axios.get(app_path+"/student?action=delete&id="+row.id).then(resp=>{
                        //1.判断执行结果
                        if(resp.data == "ok"){
                            //刷新列表页面
                            this.findList();
                        }
                    })
                }
            },
            //重置
            resetForm(addForm) {
                //双向绑定，输入的数据都赋值给了formData， 清空formData数据
                this.formData = {};
                this.editFormData = {};
            },
        },
        created() {//vue的页面加载事件
            //查询列表
            this.findList();
        }

    });
</script>
</html>